<template>
  <form @submit.prevent class="user-edit-email-wrapper" :class="fadeOutCls">
    <h2>更改邮箱</h2>

    <ul class="inputs">
      <li class="clearfix">
        <base-input
        class="old-email-input"
        placeholder="请输入密码"
        @change="inputUserpwd($event.target.value)"
        ></base-input>
      </li>
      <li>
        <base-input
        class="new-email-input"
        placeholder="请输入新邮箱"
        @change="inputEmail($event.target.value)"
        ></base-input>
        <i class="iconfont icon-warning" v-show="ifError[1].sign"></i>
        <p v-show="ifError[1].sign">{{ ifError[1].message }}</p>
      </li>
    </ul>

    <button class="submit" @click="submit">修改</button>

    <i class="iconfont icon-cancel" @click="$emit('exit')"></i>
  </form>
</template>

<script>
import BaseInput from '@/components/utils/Input/BaseInput.vue';

  export default {
    components: {
      BaseInput
    },
    props: {
      fadeOut: {
        type: Boolean,
        default: () => true
      },
    },
    data() {
      return {
        userpwd: "",
        email: "",
        ifError: [
          {
            sign: false,
            message: ''
          },
          {
            sign: false,
            message: ''
          }
        ]
      }
    },
    methods: {
      inputUserpwd(userpwd) {
        this.userpwd = userpwd;
      },
      inputEmail(email) {
        this.email = email;
        if(!/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(email)) {
          this.ifError[1].sign = true;
          this.ifError[1].message = '邮箱格式不正确';
        } else {
          this.$post({
            name: 'check email',
            url: 'register/check/email',
            data: {
              email
            },
            callback: res => {
              this.ifError[1].sign = !res.data.success;
              this.ifError[1].message = res.data.message;
            }
          })
        }
      },
      submit() {
        this.$store.commit('changeAccountInfo', {
          key: 'email',
          value: this.email,
          userpwd: this.userpwd
        });
      }
    },
    computed: {
      fadeOutCls() {
        return this.fadeOut ? 'fadeOut' : '';
      }
    },
  }
</script>

<style lang="less" scoped>
.user-edit-email-wrapper {
  box-sizing: border-box;
  padding: 2vw 1vw;

  background-color: white;
  border-radius: 1vw;
  transition: .3s;

  h2 {
    text-align: center;
    color: var(--blue);
    font-size: 1.8vw;
  }

  .old-email-input,
  .new-email-input{
    --baseInputWidth: 20vw;
    --baseInputHeight: 3vw;
    --baseInputFontsize: 1.2vw;
    margin: 0 auto;
  }

  .inputs li {
    position: relative;
    width: 20vw;
    margin: 2.5vw auto;

    > i {
      color: red;
      position: absolute;
      top: 50%;
      right: 1vw;
      transform: translateY(-50%);
    }

    > p {
      position: absolute;
      top: 100%;
      left: .5vw;
      font-size: .6vw;
      color: red;
    }
  }

  > .iconfont {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: .5vw .8vw;
    font-size: 1vw;
    font-weight: bold;
    transition: .2s;

    &:hover {
      transform: rotate(90deg);
      cursor: pointer;
    }
  }

  > .submit {
    margin: 0 2.5vw;
    width: 20vw;
    height: 3vw;
    color: white;
    font-weight: bold;
		border-radius: 1.5vw;
		background-image: linear-gradient(-200deg, #fac0e7, #91baff);
  }
}

</style>